<template>
  <q-card class="full-width">
    <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" narrow-indicator>
      <q-tab name="特" :label="`特(${地区名})`" />
      <q-tab name="特_肖各号" :label="`特_肖各号(${地区名})`" />
      <q-tab name="平特肖" :label="`平特肖(${地区名})`" />
      <q-tab name="明细表" :label="`明细表(${地区名})`" />

    </q-tabs>
    <q-separator />
    <q-tab-panels v-model="tab" animated @before-transition="tab切换">
      <q-tab-panel name="特">
        <!-- <div>
          {{ store.count[地区名] }}
          <q-btn class="apd416" color="accent " label="++++" @click="store.increment(地区名)" />
          {{ store.count计算(地区名) }}
        </div> -->
        <div class="q-pa-xs">
          <div class="q-col-gutter-xs row">
            <a-tedange v-for="i in store.待选号码" :i="i" :下注数="特码下注数" @update:特码号="update特码号">
            </a-tedange>
            <q-btn class="apd416" color="accent " label="确定" @click="特码确定()" />
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="特_肖各号">
        <div class="q-pa-xs">
          <div class="q-col-gutter-xs row">
            <a-texiaogehao v-for="(item, i) in 肖号对照" :i="i" :下注数="特_肖各号下注数" :item="item" @update:肖下注数="update特_肖各号"
              :key="i">
            </a-texiaogehao>
            <q-btn class="apd416" color="accent " label="确定" @click="特_肖各号确定()" />
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="平特肖">
        <div class="q-pa-xs">
          <div class="q-col-gutter-xs row">
            <a-texiaogehao v-for="(item, i) in 肖号对照" :i="i" :下注数="平特肖下注数" :item="item" @update:肖下注数="update平特肖" :key="i">
            </a-texiaogehao>
            <q-btn class="apd416" color="accent " label="确定" @click="平特肖确定()" />
          </div>
        </div>
      </q-tab-panel>
      <q-tab-panel name="明细表">
        <!-- 地区名是props所以必须用括号？ -->
        <q-table title="明细表" :rows="store.找对应主单(编号).下单明细" :columns="columns" row-key="序号" binary-state-sort
          :rows-per-page-options="[0]" separator="cell">
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width />
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.label }}
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
                <q-btn color="negative " icon="clear" dense @click="删除明细行(props.row.序号)" size="xs" />
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.value }}
              </q-td>
            </q-tr>
          </template>
          <template v-slot:top>
            <!-- <div class=" q-table__title">明细表</div> -->
            <div class="row ">
              <!-- <q-input class="col-4" outlined v-model="收总计" dense label-color="orange" label="收总计￥" /> -->
              <q-input class="col-4" outlined :model-value="store.找对应主单(编号).收总计" dense label-color="orange" label="收总计￥" />
              <q-input class="col-4" outlined :model-value="store.找对应主单(编号).特码收总计" dense label-color="orange" label="特码收总计￥" />
              <q-input class="col-4" outlined :model-value="store.找对应主单(编号).平特肖收总计" dense label-color="orange" label="平特肖收总计￥" />
              <!-- <q-input class="col-4" outlined v-model="平特肖收总计" dense label-color="orange" label="平特肖收总计￥" /> -->
              <!-- {{ store.count[地区名] }}
              <q-btn class="apd416" color="accent " label="++++" @click="store.increment(地区名)" />
              {{ store.count计算(地区名) }} -->
            </div>
            <!-- <q-separator class="full-width" color="orange" inset /> -->
            <!-- <div class="col-12">开奖结果: {{ 主单.开奖结果 }}</div> -->
            <div class="col-12">开奖结果:👇 </div>
            <div class="row 不换行">
              <q-input class="p2" v-for="i in 6"  outlined :model-value="主单.开奖结果[`平${i}`]" dense label-color="orange" label="平" readonly>
              <template v-slot:append>
                <!-- <q-btn label="OK" color="primary" push v-close-popup /> -->
                <span class="text-subtitle2 text-right p1">{{ 主单.开奖结果[`平${i}_肖`] }}</span>
                <!-- {{ 主单.开奖结果[`平${i}_肖`] }} -->
              </template>
            </q-input>
              <q-input outlined :model-value="主单.开奖结果.特" dense label-color="orange" label="特" readonly/>
            </div>
          </template>
        </q-table>
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import ATedange from "../components/特单个号码.vue";
import ATexiaogehao from "../components/特_肖各号.vue";

const props = defineProps({
  地区名: {
    type: String,
    default: '地区？',
  },
  编号: {

  },
});

import { useStore } from '../stores/store'
import { storeToRefs } from 'pinia'
const store = useStore()
const 主单 = store.找对应主单(props.编号);


const { 总下单, count计算 } = storeToRefs(store);

const 特码下注数 = reactive({
  // 1: 66,
  // 2: 66,
  // 3: 66,
});
// const 收总计 = computed(() => {
//   return 计算rows总下单()
// })

function 计算rows总下单() {
  store.计算rows总下单(props.地区名)
  // return 总下单.地区名.value.reduce((total, cur) => {
  //   return total + cur.收
  // }, 0)
}

// const 特码收总计 = store.特码收总计(props.地区名)
// const 特码收总计 = store.count计算(props.地区名)
// const 特码收总计 = computed(() => {
//   return 总下单.地区名.value.reduce((total, cur) => {
//     return cur.玩法 == "特码" ? total + cur.收 : total
//   }, 0)
// })
// const 特码收总计 = store.特码收总计(props.地区名)

// const 平特肖收总计 = store.平特肖收总计(props.地区名)
// const 平特肖收总计 = computed(() => {
//   return 总下单.地区名.value.reduce((total, cur) => {
//     return cur.玩法 == "平特肖" ? total + cur.收 : total
//   }, 0)
// })
const 肖号对照 = reactive({
  兔: ["01", "13", "25", "37", "49"],
  虎: ["02", "14", "26", "38"],
  牛: ["03", "15", "27", "39"],
  鼠: ["04", "16", "28", "40"],
  猪: ["05", "17", "29", "41"],
  狗: ["06", "18", "30", "42"],
  鸡: ["07", "19", "31", "43"],
  猴: ["08", "20", "32", "44"],
  羊: ["09", "21", "33", "45"],
  马: ["10", "22", "34", "46"],
  蛇: ["11", "23", "35", "47"],
  龙: ["12", "24", "36", "48"],
});
const 特_肖各号下注数 = reactive({
  // "兔": 66,
});
const 平特肖下注数 = reactive({});

function filterFn(val, update, abort) {
  update(() => {
    const needle = val.toLocaleLowerCase();
    options.value = stringOptions.filter(
      (v) => v.toLocaleLowerCase().indexOf(needle) > -1
    );
  });
}
function update特码号(i, val) {
  // console.log("val", val);
  // console.log("i", i);
  特码下注数[i] = Number(val);
  // 特码下注数.push({ '号码': i, '收': Number(val) });
}
function update特_肖各号(i, val) {
  // console.log("i", i);
  // console.log("val", val);
  特_肖各号下注数[i] = Number(val);
  // 特_肖各号下注数.push({ '肖': i, '收': Number(val) });
}

function 删除明细行(序号) {
  console.log("删除明细行 序号", 序号);
  // console.log("val", val);
  store.删除主单明细(props.编号,序号)
}

function update平特肖(i, val) {
  // console.log("i", i);
  // console.log("val", val);
  平特肖下注数[i] = Number(val);
  // console.log('平特肖下注数', 平特肖下注数)
}

const text = ref("特");

const tab = ref("特");
const columns = [
  // {
  //   name: "时间",
  //   required: true,
  //   label: "时间",
  //   align: "left",
  //   field: "时间",
  //   sortable: true,
  // },
  {
    name: "序号",
    required: true,
    label: "序号",
    align: "center",
    field: "序号",
    sortable: true,
  },
  {
    name: "玩法",
    align: "center",
    label: "玩法",
    field: "玩法",
    sortable: true,
  },
  {
    name: "号码",
    align: "center",
    label: "号码😄",
    field: "号码",
    sortable: true,
  },
  { name: "收", align: "center", label: "收￥", field: "收", sortable: true },
  { name: "赔率", align: "center", label: "赔率", field: "赔率", sortable: true },
  { name: "出", align: "center", label: "出￥", field: "出", sortable: true },
];


import { 获取最大值, 清空对象 } from "../components/hooks.js";
function 特码确定() {
  add明细(特码下注数, '特码')
  // 特码下注数[1] = 99
  // 特码下注数[2] = 99
  // 特码下注数[3] = 99
  清空对象(特码下注数);

  console.log('特码下注数', 特码下注数)

}
// import { useQuasar } from "quasar";
// const $q = useQuasar();

function add明细(下注数, 玩法) {
  store.add明细(props.编号,props.地区名, 下注数, 玩法)
}

function 特_肖各号确定() {
  Object.keys(特_肖各号下注数).forEach(key => {
    const 号码s = 肖号对照[key];
    // console.log("号码s", 号码s);
    号码s.forEach((号码) => {
      特码下注数[号码] = 特_肖各号下注数[key];
    });
  });

  add明细(特码下注数, '特码')
  清空对象(特_肖各号下注数);
}

function 平特肖确定() {
  // console.log("平特肖确定", 平特肖下注数);
  add明细(平特肖下注数, '平特肖')
  清空对象(平特肖下注数);

}
function tab切换(newVal, oldVal) {
  // console.log('newVal', newVal)
  // console.log('oldVal', oldVal)
  if (oldVal == '特') {
    清空对象(特码下注数);
  } else if (oldVal == '特_肖各号') {
    清空对象(特_肖各号下注数);
  } else if (oldVal == '平特肖') {
    // 平特肖下注数 = {}
    清空对象(平特肖下注数);

  }
}

</script>

